<template>
  <div class="content-container">
    <el-breadcrumb separator-class="el-icon-arrow-right" class="pd-total">
      <el-breadcrumb-item :to="{ path: '/project' }"
        >项目管理</el-breadcrumb-item
      >
      <el-breadcrumb-item
        :to="{ name: 'project',params: { pn1: this.pn5} }"
        v-if="!$route.query.isclose"
        >正式项目</el-breadcrumb-item
      >
      <el-breadcrumb-item
        :to="{ path: '/project', query: { isclose: $route.query.isclose } }"
        v-else
        >已关闭项目</el-breadcrumb-item
      >
      <el-breadcrumb-item>项目目标</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card class="box-card">
      <el-button type="primary" class="div-top-btn" @click="addTarget()"
        >新增目标</el-button
      >
      <div class="div-top">
        <span>{{ projectName }}项目</span>
      </div>
      <el-button type="primary" class="box-select-btn" @click="select()"
        >查询</el-button
      >
      <!-- &#12288; -->
      <span class="box-select">
        <el-date-picker
          v-model="value"
          type="monthrange"
          range-separator="-"
          start-placeholder="开始月份"
          end-placeholder="结束月份"
          value-format="yyyy-MM"
        >
        </el-date-picker>
      </span>
    </el-card>
    <p></p>
    <el-card class="box-card">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column
          prop="projectName"
          label="项目名称"
          width="230"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="startDate"
          label="开始日期"
          width="115"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="endDate"
          label="结束日期"
          width="115"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="goalContext"
          label="项目目标"
          width="450"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="pushTime"
          label="填写日期"
          width="230"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="pushName"
          label="填写人"
          width="150"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="operation" align="center" label="操作">
          <template slot-scope="scope">
            <el-button
              type="primary"
              plain
              size="mini"
              @click="updateTarget(scope.row)"
              >编 辑</el-button
            >
            <el-button
              type="danger"
              plain
              size="mini"
              @click="deleteTarget(scope.row)"
              >删 除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        v-if="pageObj"
        :page-size="pageObj.size"
        :total="pageObj.total"
        :current-page="pageObj.currentPage"
        @current-change="pageObj.func"
        @size-change="handleSizeChange"
        :page-sizes="[5, 10, 15, 20, 30, 40]"
      >
      </el-pagination>
    </el-card>

    <!-- 新增目标的对话框 -->
    <el-dialog :title="title" :visible.sync="dialogFormVisible" width="30%">
      <el-form :model="form" ref="targetForm">
        <el-form-item
          label="项目名称:"
          :label-width="formLabelWidth"
          style="width: 470px"
        >
          <el-input
            v-model="form.projectName"
            autocomplete="off"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item
          label="目标日期:"
          prop="dateValue"
          :label-width="formLabelWidth"
          style="width: 450px"
          :rules="{
            required: true,
            message: '日期不能为空',
            trigger: 'blur',
          }"
        >
          <el-date-picker
            v-model="form.dateValue"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <div v-if="this.category == 'add'">
          <el-form-item
            v-for="(item, i) of form.targetMsgs"
            :key="i"
            :label="'目标内容' + (i + 1) + ':'"
            :prop="'targetMsgs.' + i + '.value'"
            :label-width="formLabelWidth"
            :rules="{
              required: true,
              message: '目标内容不能为空',
              trigger: 'blur',
            }"
          >
            <el-input style="width: 350px" type="textarea" v-model="item.value">
            </el-input>
            <el-button
              icon="el-icon-minus"
              circle
              @click="dele(item)"
            ></el-button>
          </el-form-item>
          <div class="btn-input">
            <el-button icon="el-icon-plus" circle @click="add()"></el-button>
          </div>
        </div>
        <div v-if="this.category == 'update'">
          <el-form-item label="目标内容:" :label-width="formLabelWidth">
            <!-- 
             -->
            <el-input
              style="width: 350px"
              type="textarea"
              v-model="goalContext"
            >
            </el-input>
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel()">取 消</el-button>
        <el-button
          v-if="this.category == 'add'"
          type="primary"
          @click="submit('targetForm')"
          >确 定</el-button
        >
        <el-button
          v-if="this.category == 'update'"
          type="primary"
          @click="submitUpdate('targetForm')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getGoalsList,
  saveGoals,
  updateGoals,
  deleteGoals,
} from "@/service/progressApi"; //接口
export default {
  data() {
    return {
      title: "",
      category: "",
      form: {
        projectName: "",
        dateValue: [],
        targetMsgs: [{ value: "" }],
      },
      arrTargetMsgs: [],
      id: "",
      goalContext: "",
      projectName: this.$route.query.projectName,
      projectId: this.$route.query.projectId,
      period: "",
      options: [],
      tableData: [],
      dialogFormVisible: false,
      formLabelWidth: "120px",
      value: "",
      pageObj: {
        size: 10,
        total: 0,
        height: "75vh",
        currentPage: 1,
        func: (currentPage) => {
          this.pageTurning(currentPage);
        },
      },
      pn: 1,
      ps: 10,
      pn5: this.$route.query.pn,
    };
  },

  created() {
    this.getTableList();
  },

  methods: {
    getTableList() {
      if (this.value == null) {
        let data = {
          pn: this.pn,
          ps: this.ps,
          startTime: "",
          endTime: "",
          projectId: this.projectId,
        };
        getGoalsList(data).then((res) => {
          if (res.code == 0) {
            this.tableData = res.data.records;
            this.pageObj.total = res.data.total;
            this.pageObj.currentPage = res.data.current;
            this.pageObj.size = res.data.size;
          }
        });
      } else {
        let data = {
          pn: this.pn,
          ps: this.ps,
          startTime: this.value[0],
          endTime: this.value[1],
          projectId: this.projectId,
        };
        getGoalsList(data).then((res) => {
          if (res.code == 0) {
            this.tableData = res.data.records;
            this.pageObj.total = res.data.total;
            this.pageObj.currentPage = res.data.current;
            this.pageObj.size = res.data.size;
          }
        });
      }
    },

    //   翻页
    pageTurning(currentPage) {
      this.pageObj.currentPage = currentPage;
      this.pn = currentPage;
      this.getTableList();
    },

    handleSizeChange(val) {
      this.ps = val;
      this.getTableList();
    },

    select() {
      this.getTableList();
    },

    addTarget() {
      this.category = "add";
      this.form.projectName = this.projectName;
      this.title = "新增目标";
      this.dialogFormVisible = true;
    },

    updateTarget(row) {
      this.title = "编辑目标";
      this.category = "update";
      this.id = row.id;
      this.form.projectName = this.projectName;
      this.form.dateValue.push(row.startDate);
      this.form.dateValue.push(row.endDate);
      this.goalContext = row.goalContext;
      this.dialogFormVisible = true;
    },
    submitUpdate(targetForm) {
      this.$refs[targetForm].validate((valid) => {
        if (valid) {
          if (this.goalContext == "") {
            this.$message({
              message: "目标内容不能为空",
              type: "warning",
            });
          } else {
            let data = {
              id: this.id,
              startDate: this.form.dateValue[0],
              endDate: this.form.dateValue[1],
              goalContext: this.goalContext,
            };
            updateGoals(data).then((res) => {
              if (res.code == 0) {
                this.$message({
                  message: "编辑成功!",
                  type: "success",
                });
              }
              this.cancel();
              this.select();
              this.dialogFormVisible = false;
            });
          }
        }
      });
    },

    deleteTarget(row) {
      this.$confirm("是否删除此目标?", "删除目标", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          this.id = row.id;
          deleteGoals(this.id).then((res) => {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.select();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    cancel() {
      this.form.dateValue = [];
      this.form.targetMsgs = [{ value: "" }];
      this.arrTargetMsgs = [];
      this.$nextTick(() => {
        this.$refs.targetForm.clearValidate();
      });
      this.dialogFormVisible = false;
    },

    submit(targetForm) {
      this.$refs[targetForm].validate((valid) => {
        if (valid) {
          for (let i in this.form.targetMsgs) {
            this.arrTargetMsgs.push(this.form.targetMsgs[i].value);
          }
          let data = {
            projectId: this.projectId,
            projectName: this.projectName,
            startTime: this.form.dateValue[0],
            endTime: this.form.dateValue[1],
            goals: this.arrTargetMsgs,
          };
          saveGoals(data).then((res) => {
            if (res.code == 0) {
              this.$message({
                message: "添加成功!",
                type: "success",
              });
            }
            this.cancel();
            this.select();
          });
        }
      });
    },

    add() {
      this.form.targetMsgs.push({ value: "" });
    },
    dele(item) {
      if (this.form.targetMsgs.length === 1) {
        this.$message({
          message: "至少一条内容",
          type: "warning",
        });
      } else {
        var index = this.form.targetMsgs.indexOf(item);
        if (index !== -1) {
          this.form.targetMsgs.splice(index, 1);
        }
      }
    },
  },
};
</script>

<style scoped>
@import "../../../styles/common.css";
.box-card {
  width: 80%;
  margin-left: 150px;
}
.box-select {
  float: right;
  margin-top: -30px;
  margin-right: 30px;
}
.box-select-btn {
  float: right;
  margin-top: -30px;
}
.div-top {
  text-align: center;
  font-size: 22px;
  font-weight: bold;
  font-family: Microsoft YaHei;
}
.div-top-btn {
  float: left;
}
.version-select {
  margin: 0 10px 0 30px;
}
.dialog-footer {
  text-align: center;
}
.content-container .rh {
  margin: 0px;
}
.progress-manager-subtitle {
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  color: rgba(48, 49, 51, 1);
  margin-bottom: 20px;
}

.version-table tr:first-child {
  background-color: #f9f9f9;
}

.new-add-btn {
  position: relative;
  top: -6px;
}

.green-btn {
  width: 120px;
  font-size: 14px;
  background-color: #00b98d;
  border-color: #00b98d;
}

.blue-btn {
  width: 120px;
  font-size: 14px;
  background-color: #409eff;
  border-color: #409eff;
}

.btn-wd {
  float: left;
}

.submit-summary {
  display: inline-block;
}

.summary-btn {
  width: 200px;
}
.btn-input {
  line-height: 60px;
  text-align: center;
  width: 500px;
}
.el-dialog__header {
  text-align: center;
}
.el-date-editor .el-range-separator {
  padding: 0 0px;
  line-height: 32px;
  width: 5%;
  color: #303133;
}
</style>